<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域一览</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="margin-top: 5px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><h2>区域一览</h2></legend>
    </fieldset>

    <table id="areaTable" lay-filter="areaDetail"></table>

    <div class="layui-row">
        <div class="layui-col-md1">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius" id="btnAdd">添加区域</button>
                </div>
            </div>
        </div>
    </div>
    <!--开启查询-->
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset7">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>查询区域信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label"><h3>地域名称</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="areaName" placeholder="请输地域名称" autocomplete="off" class="layui-input" id="areaName" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
                <br>
                <label class="layui-form-label"><h3>林种</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="treeType" placeholder="请输入林种" autocomplete="off" class="layui-input" id="treeType" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
                <br>
                <label class="layui-form-label"><h3>负责小班</h3></label>
                <div class="layui-input-block">
                    <input type="text" name="className" placeholder="请输入负责小班" autocomplete="off" class="layui-input" id="className" style="padding: 15px;box-shadow: 0 0 5px rgba(0,0,0,0.5)">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-icon layui-btn-radius" id="btnQuery">立即查询</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer'],function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.$;

        //第一个实例
        let t = table.render({
            elem: '#areaTable',
            url: '/MyForestManagerSystem/as.do?method=area_detail_page', //数据接口,从servlet注解中urlPatterns = "/as.do"获取
            page: true ,//开启分页
            request: {//可不写，有默认的page和limit
                pageName: 'pageNo', //页码的参数名称，默认：page
                limitName: 'pageSize', //每页数据量的参数名，默认：limit
            },
            limits:[2,4,6,8],
            cols: [[ //表头
                    {
                        field: 'areaId',
                        title: '地域编号',
                        width: 110,
                        align:'center',
                        sort: true,
                        fixed: 'left'
                    }, {
                    field: 'areaName',
                    title: '地域名称',
                    width: 200,
                    align:'center',
                    edit: true
                     }, {
                    field: 'treeType',
                    title: '林种',
                    width: 200,
                    align:'center',
                    edit: true
                    }, {
                    field: 'land',
                    title: '地类',
                    width: 110,
                    align:'center',
                    edit: true
                     }, {
                    field: 'advTree',
                    title: '优势树种',
                    width: 110,
                    align:'center',
                    edit: true
                    }, {
                    field: 'className',
                    title: '负责小班',
                    width: 200,
                    align:'center',
                    edit: true
                    }
            ]]
        });
        //查询,重载表格
        $("#btnQuery").click(function () {
            t.reload({
                where:{
                    areaName:$(" input[name=areaName]").val(),
                    treeType:$("#treeType").val(),
                    className:$("#className").val(),
                },
                page:{
                    curr:1,
                }
            })
        })
        //添加地域
        $("#btnAdd").on("click",function () {
            layer.open({
                type:2,
                content:"/MyForestManagerSystem/home/area_add.html",
                title:"添加地域信息",
                area:["400px","400px"],
                shade: [0.8, '#393D49'],
                anim:4,
                maxmin: true,
                btn: ['确定', '关闭'],
                yes: function (index, layero) {
                    let body = layer.getChildFrame("body",index);
                    let areaName = body.find("input[name=areaName]").val();
                    let treeType = body.find("input[name=treeType]").val();
                    let advTree = body.find("input[name=advTree]").val();
                    let land = body.find("select[name=land]").val();
                    $.ajax({
                        type:"get",
                        url:"/MyForestManagerSystem/as.do?method=add_area",
                        data:{"areaName":areaName,"treeType":treeType,"land":land,"advTree":advTree},
                        success:function (data) {
                            if(data === "true"){
                                t.reload({
                                    page: {
                                        curr: 1 //查询后，重新从第 1 页开始
                                    }
                                })
                                layer.alert("添加成功");
                            }else {
                                layer.alert("添加失败");
                            }
                        }
                    })

                    layer.close(layer.index);
                },
                btn2:function (index, layero) {
                    return true;//默认--开启return false该代码可禁止点击该按钮关闭
                }
            })
        })
    });
</script>

</html>